<template>
    <view>
        <view class="item" v-for="(item, index) in data">
            <view class="name">
                {{item.nm}}
            </view>
            <view class="img">
                <image :src="item.img" mode=""></image>
            </view>
            <view class="video">
                <video :src="item.videourl"></video>
            </view>
        </view>
    </view>
</template>
<script setup>
    import { ref } from 'vue'
    import { onLoad } from '@dcloudio/uni-app'
    import { CONFIG } from '../../utils/config';
    import { userStore } from '../../store/userStore';
    import { data } from "@/utils/data.js"
    let store = userStore()
    onLoad(() => {
        getMovieList()
    })
    async function getMovieList() {
        let res = await uni.$get("https://wx.maoyan.com/mmdb/movie/v2/list/hot.json")
        console.log(res)
    }
</script>
<style scoped>
    /* 整体容器样式，设置一些内边距等让内容更规整 */
    view {
        padding: 10px;
    }

    /* 每个电影项的容器样式 */
   .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        border-bottom: 1px solid #ccc;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    /* 电影名称样式 */
   .name {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
    }

    /* 图片容器样式 */
   .img {
        width: 150px;
        height: 200px;
        overflow: hidden;
        margin-bottom: 10px;
    }

    /* 图片样式，设置为占满图片容器并保持比例缩放 */
   .img image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* 视频容器样式 */
   .video {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

    /* 视频样式，设置为占满视频容器并保持比例缩放 */
   .video video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>